<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="王佳佳">
    <title></title>
    <style>
        *
        {
            box-sizing: border-box;
        }
        body
        {
            margin: 0;
        }
        div
        {
            border: 1px solid;
            width: 560px;
            height: 270px;
            margin: 50px auto;
        }
        section
        {
            height: 50px;
            width: 560px;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
        }
        ul
        {
            width: 560px;
             height: 100px; 
            /* margin-top: 10px; */
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-around;
        }
        li
        {
            /* border: 1px solid; */
            width: 102px;
            height: 102px;
            line-height: 102px; 
            text-align: center;
        }
        img
        {
            width: 100px;
            height: 100px;
            display: none; 
        }
    </style>
</head>
<body>
    <div>
        <section>名车车标展示</section>
        <ul>
            <li><p>宝马汽车</p><img src="img/1.jpg" alt=""></li>
            <li><p>宝马汽车</p><img src="img/2.jpg" alt=""></li>
            <li><p>宝马汽车</p><img src="img/3.jpg" alt=""></li>
            <li><p>宝马汽车</p><img src="img/4.jpg" alt=""></li>
            <li><p>宝马汽车</p><img src="img/5.jpg" alt=""></li>
        </ul>
        <ul>
            <li><p>宝马汽车</p><img src="img/6.jpg" alt=""></li>
            <li><p>宝马汽车</p><img src="img/7.jpg" alt=""></li>
            <li><p>宝马汽车</p><img src="img/8.jpg" alt=""></li>
            <li><p>宝马汽车</p><img src="img/9.jpg" alt=""></li>
            <li><p>宝马汽车</p><img src="img/10.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>

<script>
    window.onload = function()
    {
        var lis = document.querySelectorAll('li');
        var imgs = document.querySelectorAll('img');
        var texts = document.querySelectorAll('p');
        var index = 0;
        for(var i = 0; i　< lis.length; i++)
        {
            lis[i].index = i;
            lis[i].onmouseover = function()
            {
                
                imgs[this.index].style.display = 'block';
                texts[this.index].style.display = 'none';
            }
            lis[i].onmouseout = function()
            {
                
                imgs[this.index].style.display = 'none';
                texts[this.index].style.display = 'block';
            }
        }
    }
    
</script>